<script lang="ts" setup>
import { ControlsCard, PaginationCard, SearchCard, TableCard } from '@/components/basic/Card'
import { Pagination } from '@/components/basic/Pagination'
import { createVNode, h, reactive, ref, toRefs } from 'vue'
import { AlertOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import to from '@/utils/awaitTo'
import { Api } from '@/api'
import { message, Modal } from 'ant-design-vue'

// 响应式数据
const queryRef = ref()
const formRef = ref()
const state = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    hospitalName: '',
    province: '',
    city: ''
  },
  open: false, // 开关
  total: 0, // 总页数
  title: '', // 标题
  form: {},//表单
  loading: false, // 加载
  list: [], //列表
  sendLoading: false //按钮loading
})

const { queryParams, open, title, form, loading, list, sendLoading, total } = toRefs(state)


// 数据列表
const getList = async () => {
  const [error, data] = await to(Api.hospital.hospitalList(queryParams.value))
  if (!error) {
    list.value = data.rows
    total.value = Number(data.total)
    console.log(data)
  }
}

// 打开新增医院
const handleAddHospital = () => {
  open.value = true
  title.value = '新增医院'
}

// 打开修改医院
const handleEditHospital = async (item) => {
  reset()
  const [error, data] = await to(Api.hospital.hospitalEcho(item.hospitalId))
  if (!error) {
    open.value = true
    title.value = '修改医院'
    form.value = data
  }
}

// 打开删除医院
const handleDelete = async (item) => {
  const { hospitalId, hospitalName } = item
  Modal.confirm({
    title: `删除`,
    icon: createVNode(ExclamationCircleOutlined),
    content: `是否删除${hospitalName}医院`,
    onOk() {
      // eslint-disable-next-line no-async-promise-executor
      return new Promise(async (resolve, reject) => {
        const [error, data] = await to(Api.hospital.hospitalDelete(hospitalId))
        if (!error) {
          console.log(data)
          message.success(`${hospitalName},删除操作成功`)
          await getList()
          resolve(true)
        }
        reject(false)
      }).catch(() => console.log('Oops errors!'))
    }
  })
}

// 确认事件
const handleOk = (formEl) => {
  if (!formEl) return
  formEl.validate().then(async (values) => {
    const params = Object.assign({}, form.value, values)
    // 修改
    if (params.hospitalId) {
      const [error, data] = await to(Api.hospital.hospitalEdit(params))
      if (!error && data) {
        open.value = false
        message.success('操作成功')
        await getList()
      }
    }

    // 新增
    else {
      const [error, data] = await to(Api.hospital.hospitalAdd(params))
      if (!error && data) {
        open.value = false
        message.success('操作成功')
        await getList()
      }
    }
  })
}

// 重置表单
const reset = () => {
  form.value = {
    city: '',
    createBy: '',
    createTime: '',
    hospitalName: '',
    province: '',
    silp3: '',
    updateBy: '',
    hospitalId: '',
    yunyingId: '',
    commercialAffairsId: ''
  }
}

// 搜索事件
const handleQuery = () => {
  getList()
}

// 重置搜索
const handleReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  getList()
}

// 表格字典
const columns = [
  {
    title: `医院名称`,
    dataIndex: `hospitalName`,
    key: `hospitalName`,
    align: `center`
  },
  {
    title: `所在省`,
    dataIndex: `province`,
    key: `province`,
    align: `center`
  },
  {
    title: `所在市`,
    dataIndex: `city`,
    key: `city`,
    align: `center`
  },
  {
    title: `操作`,
    dataIndex: `operation`,
    key: `operation`,
    align: `center`
  }
]


getList()
</script>

<template>
  <div>
    <SearchCard>
      <a-form ref="queryRef" :model="queryParams" layout="inline">
        <a-form-item label="医院管理" name="hospitalName">
          <a-input v-model:value="queryParams.hospitalName" placeholder="请输入医院管理" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item label="所在省" name="province">
          <a-input v-model:value="queryParams.province" placeholder="请输入所在省" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item label="所在市" name="city">
          <a-input v-model:value="queryParams.city" placeholder="请输入所在市" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">搜索</a-button>
            <a-button @click="handleReset(queryRef)">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </SearchCard>

    <ControlsCard>
      <a-button :icon="h(AlertOutlined)" @click="handleAddHospital">新增医院</a-button>
    </ControlsCard>

    <TableCard>
      <a-table :columns="columns" :data-source="list" :loading="loading" :pagination="false">
        <template #bodyCell=" { column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button :loading="sendLoading" type="primary" @click="handleEditHospital(record)">修改</a-button>
              <a-button danger type="primary" @click="handleDelete(record)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </TableCard>

    <PaginationCard>
      <Pagination v-model:page-num="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total"
                  @pagination="getList" />
    </PaginationCard>

    <a-modal v-model:open="open" :ok-button-props="{ loading: sendLoading }" :title="title"
             @ok="handleOk(formRef)">
      <a-form ref="formRef" :model="form" layout="vertical">
        <a-form-item label="医院名称" name="hospitalName">
          <a-input v-model:value="form.hospitalName" placeholder="请输入医院名称" />
        </a-form-item>
        <a-form-item label="所在省" name="province">
          <a-input v-model:value="form.province" placeholder="请输入所在省" />
        </a-form-item>
        <a-form-item label="所在市" name="city">
          <a-input v-model:value="form.city" placeholder="请输入所在市" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
